<script lang="ts">
import { defineComponent, toRaw, type PropType } from "vue";
import { previewImage } from "@/utils/meida";

import EditMenuTitle from "./edit-menu-title.vue";

export default defineComponent({
  components: { EditMenuTitle },
  props: {
    listData: { type: Array as PropType<string[]>, required: true },
    title: String,
  },
  setup(props) {
    const imgClick = (index: number) => {
      previewImage(toRaw(props.listData), index);
    };

    return { imgClick };
  },
});
</script>

<template>
  <view class="img-list">
    <view class="img-list-title">
      <EditMenuTitle :title="title" />
    </view>
    <view class="img-list-wrapper">
      <image
        class="img-list-item"
        v-for="(i, d) of listData"
        :key="i"
        :src="i"
        mode="aspectFill"
        @click="imgClick(d)"
      />
    </view>
  </view>
</template>

<style lang="scss">
.img-list {
  .img-list-title {
    padding-left: 30rpx;
  }

  .img-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 24rpx;
    padding-bottom: 20rpx;
  }

  .img-list-item {
    width: 156rpx;
    height: 156rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }
}
</style>